7 
о 


Зволюция подходов к работе с таблицами: = 
танцьт с десятками тьсяч строк 


АННА ЛАНДА 


+ 


Frontend 
Conf 2022 


АННА ЛАНДА 


= Егопіепа-разработчик 
= В Самокате > 2 лет 
= Общий стаж во фронте - 6 лет 


= Пилю таблицы 


samokat.tech 


САМОКАТ 


№1 в России по числу заказов 
Продукть за 15 минут 
Не только продукть! 


samokat.tech 


ЗАМОКАТ.ТЕСН 


Высоконагруженная система с распределенной 
архитектурой 


Свои решения для закупок, логистики, сборки, 
прогнозирования спроса, управления промо- 
компаниями 


samokat.tech 


ПОЧЕМУ ТАБЛИЦЫ? 


samokat.tech 


Если не таблицы, TO 
что?... 


Зкспертиза и 
множество готовых 
решений 
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ПРЕДПОЛАГАЕМАЯ АУДИТОРИЯ 
ДОКЛАДА 
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QA 


Frontend 


Design 


< 


ЗВОЛЮЦИЯ ПОДХОДОВ K РАБОТЕ С ТАБЛИЦАМИ 
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Надо сделать вот ТАКУУУУЩУЮ таблицу, чтоб там было несколько уровней 
вложенности, и чтоб порядок вложенности можно было переключать 


Общую сумму заказа считать, и блочить кнопку Сохранить и подсвечивать 
невалидные строки и группы. И в группах тоже суммы считать 


Нам надо весь проект переписать на Веасі, чтобы переиспользовать общие 
компоненты 


Да, и надо чтоб редактирование было прям в таблице, и по нажатию Enter 
переводило в числовое поле на следующую строчку 


Выбор нескольких строк обязательно по shift-y, чтоб массовые действия 
применять 


И вообще мы хотим свою дизайн систему 


Нам же не надо будет ар! менять? 


samokat.tech о асо вий | % 


СПИСОК НЕФУНКЦИОНАЛЬНЫХ ТРЕБОВАНИЙ 


переписать уже имеющуюся 
таблицу c Angular на React 


внедрить хоть какой-нибудь 
компонент для таблиц на Веасі, 
который бы покрывал максимум 
потребностей 


понять, кто такие локаторы 


использовать уже имеющиеся 
ручки для бэка 


уметь не тупить на 10000 
строк... 
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г, 


6 » AntDesign 


Semantic Ul React 
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ПОЧЕМУ ANT DESIGN? 


. = Order Manager был написан Ha Ant Design, но Ha его 
ө Þ> Ant Design ангулярной версии 


= какой-то другой проект Самоката тоже использовал Ant 
Design 

* довольно понятная документация с примерами Hà 
StackBlitz и CodeSandBox 
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АНТОВСКИЕ ТАБЛИЦЫ УМЕЮТ ВСЕ ИЗ 
КОРОБКИ 


. * фиксированный заголовок 
<> Ant Design = фиксированные колонки (справа/слева) 
= группировка строк 
= выбор нескольких строк 
(даже с группировкой) 
= Сортировка M фильтрация (можно кастомизировать фильтры) 
= паджинация (с миллионом настроек) 
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ЕСТЬ ГАЙДЫ, КАК МАСШТАБИРОВАТЬ 


А * редактируемые строки 
<> Ant Design = виртуализация 
= resizable columns 


= infinite scroll 
= drag-n-drop 
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ДАЖЕ ЛОКАТОРЫ ЕСТЬ 


w «ТГ class="ant-table-row ant-table-row-level-a" 

«td class-"ant-table-cell"»John Browne; td» 

<td class-"ant-table-cell"»32«/td» 

<td class-"ant-table-cell"»Mew York Ho. 1 Lake Park«/td» 
</tr> 

k <tr class="ant-table-row ant-table-row-level-e" 


dütad-lOW-Key- 17» 


m| «ИТГ» | event 
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УТОЧНЯЕМ БИЗНЕС-ТРЕБОВАНИЯ 


" группировка 
(переключение между группировкой по товару/даркстору) 


" редактирование 
* переход no enter 
* выбор нескольких строк 


- агрегированные значения 
(для каждой из групп и для всей таблицы) 
" сортировки и фильтры 
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АА Обновить данные Удалить задачу 
1/2 Формирование заказа P на ЦФЗ; 14 авг. вс Товары не кратны поставке (1 шт.) 


1 167,84 p. (30 093,08 р.) | 1 (2) SKU | 12 шт.(280 шт.) 


Y Все ЦФЗ Ф Прошлые акции e Будущие акции ° Нулевые (7 Большой прогноз (С Низкая доступность (С Изменения динамики Цез 
[9] ядя Ваня | корнишоны, по- E 12 шт. 1 167,84 p. 
гурцы Дядя рэв i 8 730 0 86% 0 50% 0 83% 1275% 0 (0) 0 +4 Р 
французски, 460 г из 12 шт. из 1 167,84 р. 
Гидростроителей 3 (НЧ) 8 730 - - - 30% 0 0) 0 3 -1 29196 p. ағ 
НЧ Мира 52/16 8 730 - - - 30% 0 (0) 0 3 +1  29196p. м 


Набережные Челны ул. Хади Такташа д. 


8 73 - - - 0 70 3 +1 29196р къ 
51 3 p 
Хасана Туфана р-н ж/д 14/04 (HU) 8 730 0 8696 0 5096 0 83% 3300% 0 (0) 0 3 +1 291,96р. ағ 
Огурцы Дядя Ваня | маринованные, по- : -— 2.4 "NT me * Группировка 
берлински, 680 г ке Мами кок QU 56% (переключение между группировкой по товару/даркстору) 


= редактирование 
* переход no enter 
* вьбор нескольких строк 


* аггрегированные значения 
(для каждой из групп и для всей таблицьх) 


samokat.tech * сортировки и фильтры 


ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ 


= всё же чуть-чуть переформатируем api 
= сортировка, фильтрация и подсчеты остаются на фронте 
* группировка строк реализуется силами фронта 
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В мени 
ПЕР ЖЯ РЕИНКАРНАЦИЯ ТАБЛИЦ 


E — if” 
M^ + 


Mobx Store 
data 


Heact Hooks 
useGrouping 
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25 
26 
27 
28 
29 
30 
31 
32 
55 
54 
55 
56 
49 
50 
51 
52 
55 
54 


const data = І 


< 


кеу: 1, 
name: ‘John Brown sr.', 
address: 'New York No. 1 Lake Park', 
children: [ 
t 

key: 11, 

name: 'John Brown', 

address: 'New York No. 2 Lake Park', 


key: 2, 
name: 'Joe Black', 
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Mobx Store 
data 


React Hooks 


useGrouping 
useSelection 
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return ( 


«T 


able 
columns-ícolumnsj 


onChange: (selectedRowKeys, selectedRows) => 0-- 


}, 

onSelect: (record, selected, selectedRows) => {... 

}, 

onSelectAll: (selected, selectedRows, chanseRows)[-» {-- 
) 
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Mobx Store 
data 


React Hooks 


useGrouping 
useSelection 
useSort 
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о со = с 


10 
11 
12 
15 
14 


const columns - [ 


t 


title: 'Name', 

datalndex: 'name' 

defaultSortOrder: 'descend', 

sorter: (a, b) => a.name.lens&th - b.name.lensth, 


sortDirections: ['descend'], 
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Mobx Store 
data 


Беасі Hooks 
useGrouping 
useSelection 
useSort 

useFilters 


samokat.tech 


oon Oo 


10 
11 
14 
15 
18 
19 
20 
21 
22 
25 
24 


(8) 


const columns = [ 


{ 


title: "Мате", 
dataIndex: 'name', 


filters: [ 
С ALARM 


) 
{ 
} 


// specify the condition of filtering result 
// here is that finding the name started with "value?! 


onFilter: (value, record) -» 
record.name.indexOf(value) --- 0, 


ЗВОЛЮЦИЯ ПОДХОДОВ К РАБОТЕ C ТАБЛИЦАМИ 24 
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- 


Блинь КХ Волкова А. П. с маслом, 245 г Блины сладкие 


Котлета из птицы КХ Волкова А. П. c _ И 
uM " Блюда с птицей 
тушенои капустой, 250 г 


Курица КХ Волкова А. П. грудка, с _ " 
| Блюда с птицей 
картофелем по-домашнему, 250 г 


const columns = [ 
i 
title: 'Name', 
dataIndex: "пате" 
render: (prop, record) -» record.isName ? record.name 


prop, 


ЭВОЛЮЦИЯ ПОДХОДОВ 
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Mobx Store Heact Hooks 
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Mobx Store Heact Hooks 


MobX observable 


item 
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Mobx Store Heact Hooks 
data 


MobX observable 


item 
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1/2 Формирование заказа P на ЦФЗ; 14 авг. вс 


Y Все ЦОЗ е Прошлые акции (JD Будущие акции 
Наименование Квант Г, дн 
- Огурцы Дядя Ваня | корнишоны, по- А = 
8 73 
французски, 460 г 
Гидростроителей 3 (НЧ) 8 730 
НЧ Мира 52/16 8 730 
Набережные Челны ул. Хади Такташа д. В б 
73 
51 
Хасана Туфана р-н ж/д 14/04 (НЧ) 8 730 
о ядя Ваня | маринованные, по- 
гурцы Дяд | мар E ws 


берлински, 680 г 
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СІ? Нулевые 
Продажи 7 
0 86% 
0 86% 
0 86% 


| Большой прогноз 


0 50% 


0 50% 


0 50% 


СО) Низкая доступность СВ 


й Обновить данные Удалить задачу 
Товары не кратны поставке (1 шт.) 


1 167,84 p. (30 093,08 p.) | 1 (2) SKU | 12 шт.(280 шт.) 


Изменения динамики 


| 75% 12 шт. 1 167,84 p. 
0 83% 12 0 (0) 0 
из 12 шт из 1 167,84 р. 
- 30% 0 (0) 0 3 +1 29196p. ағ 
- 30* 0 (0) 0 3 +1  29196p. мъ 
- 30% 0 (0) 0 3 +  29196p. мъ 
0 83% 3300% 0 (0) 0 3 +1 29196p. мъ 
ро, 0 шт. Ор. 
0-100% 5696 462% 0 (21) 17 р 
из 268 шт. из 28 925,24 р. 
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маш MAR 4 “Ах К E А 

к мой, 

OE % 

gi. . = + < Qa: T че UM 

(Be EQ EP А, 

- š 4 “ ; « к, , y ty. 

№ ж 
3 Q е 4.048 * 1 зай ли - ^ 
ПЕРО ОА УК zu ғ er EMPTIS. bith AA AV 

Mets TV УГАА VHC DA jeg E ee 


ЗТОРАЯ РЕИНКАРНАЦИЯ ТАБЛИЦ — 


Юл; 


5@покаї tec 1 = 


Mobx Store Heact Hooks 
data 


о | 
useSelection 
useSort 
useFilters 
useColumnRender 
useEditable 

MobX observable useFocus 

item useVT 
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Mobx Store React Hooks 
data 


brouping useSelection 00 
useSort 
useFilters 
useColumnRender 
useEditable 

MobX observable useFocus 

item useVT 
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Mobx Store Heact Hooks 
data 


— useSelection 
useSort 
useFilters 
useColumnRender 
useEditable 
MobX observable useFocus %0 
item useVT 
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Mobx Store 
data 


MobX observable 


item 
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Heact Hooks 
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Mobx Store 
data 


MobX observable 


item 


focus highlight 
group 
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Heact Hooks 
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Mobx Store 
data 
grouping 
selection 
totals 
MobX observable 
item 
focus | highlight 
group 
highlight totals 
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Heact Hooks 
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ЭТОЈПОБЕДА МО 


x НЕН 


1/2 Формирование заказа на перемещение • P на ЦФЗ; 21 июл., чт 


Y Все ЦФЗ 


Наименование ” 


WY Аджика Janarat | 260 r 


Ленинградская обл., г. Гатчина, Чехова 
ул., д. 23 


Санкт-Петербург г. Художников пр-кт, д. 
11, лит. А 


Санкт-Петербург ул. Бухарестская д. 72 к. 
1 


Санкт-Петербург, Онежская ул., д. 1 


Санкт-Петербург, большой просп. 
васильевского острова д. 83 


Москва ул. Нагатинская д. 16 
Москва ул. Троицкая д. 9 к. 1 


Москва, Мельникова ул., д. 10 


samokat.tech 


Продажи 7 


(№ прошлые акции (СВ Будущие акции 


0 8696 


0 8696 


0 8696 


0 8696 


0 8696 


0 8696 


0 8696 


0 8696 


OD Нулевые 


5096 


50% 


50% 


50% 


50% 


50% 


50% 


50% 


Продажи, 
период 


1 


OD Большой прогноз 


100% 


100% 


100% 


100% 


100% 


100% 


Прогноз 


542% 


1100% 


110076 


00% 


002% 


1100% 


05% 


В пути 


0 


Остаток , 
на ЦФЗ 


(180) 180 


(33) 33 


(0) 0 


(28) 28 


(31) 31 


(33) 33 


(9) 9 


(7)7 


(9) 9 
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Остаток , 


Ha PLI 


72 


150 (166) SKU | 46 970 шт. 


СВ Низкая доступность (СВ Изменения динамики 


72 шт. 


16 


40 


1/2 Формирование заказа P на ЦФЗ; 14 авг. вс 


Y Все ЦФЗ СВ Прошлые акции (J 


- 
Наименование 


Огурцы Дядя Ваня | корнишоны, по- 
французски, 460 г 


“~ 


Гидростроителей 3 (НЧ) 


НЧ Мира 52/16 


Набережные Челны ул. Хади Такташа д. 
51 


Хасана Туфанга р-н ж/д 14/04 (НЧ) 


Огурцы Дядя Ваня | маринованные, по- 
берлински, 680 г 
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Будущие акции 
Кван Г, дн 
8 730 
8 730 
8 730 
8 730 
8 730 
8 1095 


СІ? Нулевые 
Продажи 7 
0 86% 
0 86% 
0 86% 


Ф 


АА Обновить данные Удалить задачу 
Товары не кратны поставке (1 шт.) 


1 167,84 p. (30 093,08 p.) | 1 (2) SKU | 12 шт.(280 шт.) 


| Большой прогноз (JÜ Низкая доступность (JD Изменения динамики цез 


ериод Ha UPI 
А 12 шт. 1 167,84 р. 
0 50% 0 83% 1275% 0 (0) 0 - 5 
из 12 шт. из 1 167,84 р. 
- = 30% 0 (0) 0 3 +1  29196p. км 
2 - 30% 0 (0) 0 3 +1  29196p. км 
- - 30% 0 (0) 0 3 +  29196p. мъ 
0 50% 0 83% 3300% 0 (0) 0 3 +1 29196p. мъ 
ро, 0 шт. Ор. 
0 50% 0° 100% 56% 468% 0 (21) 17 р 
из 268 шт. из 28 925,24 р. 
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ПРОБЛЕМЫ С НАСЛЕДОВАНИЕМ 


= типизация 
* props overrides 


* размножение зависимых сущностей (два вида 
группировок + айтемы) 


- завязка хуков на старые сущности 
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Mobx Store 
data 
grouping 
selection 
totals 
MobX observable 
item 
focus | highlight 
group 
highlight totals 
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React Hooks 
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Mobx Store Heact Hooks 


MobX observable 


item 
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СЛИШКОМ МНОГО ДАННЫХ 


= с бэка приходит большой объем данных 

* снова не держим даже 10000 строк 

* каждый observable объект занимает в несколько десятков раз больше 
памяти, чем обычный и создается в несколько тысяч раз дольше 
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СЛИШКОМ МНОГО ДАННЫХ 


" группировка - на бэке 

* подгружаем вложенные строки при разворачивании 
= создаем обзегуа е-объекты по требованию 

= добавляем infinite scroll 
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АЛИДИ СПБ, РЦ, Нон-фуд_ . @ o 


Товары на хранение К 
заказа на перемещение • » на UO 


w сено Прошлые акции Будущие акции Нулевые Большой прогноз Низкая доступность Изменения динамики 
[И новые склады 2 
Выбрано 120000 позиций Согласовать 
(4 Заказь 
А Первый заказ 
> a itaque aperiam Occaecati aut odio : 696 5% 15505 6% 
(8) товары 
9 Поставщики > aquila autem omnis nihil et est odi д 14 0% 14778 0% 14778 ок 
< 
— Прогноз > — accusamus officiis architecto excepturi ea tenetur k 1% 1% 14964'% 1% 
LE d я 
"м 4 
$ Администрирование v 
[x à] Elements | Console | Sources Network Performance | Memory Application Security Lighthouse MobX 0 Components EJ Profiler 
» : 9 © maindf9bab8d485d49437002js X — parse-intjs BaseDemandsGroupingRecord.ts mobx. module ;js....d-optimizer.js RowRecord.ts StorageDemandRecord.ts StorageDemandsG...upingRecord.ts DcTaskPageStore.ts SupplierTaskPageStore.ts 
"З top ^ 1 TypeError: Cannot read property 'requestContent' of undefined 
YO om-re 
> Bg asse 7 Ж = 
4 , () Line 1, Column 62 
1 Console Performance monitor X What's New 
v CPU usage 0.1% age P P 
М JS heap size 2159 MB | 
У DOM Nodes 8915 | ЯМ 


РЕЧ ЕСІГІ oe ETIN 


400 (400) SKU | 19 999 889 шт. 59 904 285 шт.) 


admin 


Обнулить Откатить на исходных 


1518 14345) 148738 ( 
1507 143470 4 
1432 1 148792 £ 
» 

ons Ж: 
» muna + t > фФ 

SupplierOrderPreview.tsx:82 
return ( 
= getWarehouseShippingOffset.... 
Voverage: түз const supplierSchedule =. 


ПРОЕКТИРОВАНИЕ НОВОГО ПРОДУКТА 


ВАСК 


фильтрация, сортировка, паджинация 


PRODUCT GUYS 


o отказались OT группировки строк 
PERFORMANCE 


сразу используем виртуализацию 


ОА & ЗОРРОВТ 
пробрасываем все фильтры, номера страниц, параметры сортировки 
B url 


samokat.tech 
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ПО ФРОНТЕНДУ 


= заводим store для каждой отдельной таблицы 

* отдельные store на пользовательские действия с таблицей (selection, edit) 
* He используем хуки там, где не надо 

* не завязываемся на функционал компонента 

* избегаем наследования 

= пишем ассертапсе-тесть! 
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ВЫВОДЫ 


* сложные интерфейсы сильно удорожают скорость и стоимость разработки 
* не всегда стандартные решения хороши 


= надо очень хорошо оценивать объемы отображаемых данных 


samokat.tech 
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Спасибо за внимание! 
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